<template>
  <epgis-nav-container title="修改头像">
    <template #container>
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">

        <div class="layoutHorizontal layoutCenter" style="margin-top: 30px;">
          <img src="@/assets/icon/mine/cat.png" style="height:90px; width:90px;border-radius: 50px;"/>
        </div>
        <div class="layoutVerticle layoutCenter">
          <span style=" font-size: 16px; font-weight: bold; margin-top: 20px;">请选择你的头像</span>
          <span style="font-size: 14px; margin-top: 10px;">清晰的展示自己，更容易获得对方的青睐</span>
        </div>
        <div style="margin-left: auto;  margin-right: auto; margin-top: 20px;">
          <div style="background: white; padding: 16px 20px;">
            <van-uploader lazy-load
              preview-size="calc((100vw - 24px) / 4 - 8px)"
              v-model="mFileList"
              :max-count="1"
              disabled
              :before-delete="delPicFile">
              <template #default>
                <div
                  @click="selectFile"
                  class="uploaderAddBg">
                  <van-icon
                    name="add-o"
                    class="uploaderAddIcon"
                    size="30px"/>
                </div>
              </template>
            </van-uploader>
          </div>
        </div>

        <van-button @click="submitMsg" type="primary" style="position: absolute;bottom: 68px; left: 12%; right: 12%; margin: 0 auto;border-radius: 8px;" >
          提 交
        </van-button>

        <input 
          :type="'file'"
          :accept="acceptFile"
          @change="fileChange"
          style="display: none"
          ref="file" />

      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { fileUploader } from "@/common/fileUploader";
import { Toast, Notify } from "vant";
export default {
  components: {},
  data() {
    return {
      mFileList: [],
      acceptFile:"",
      userId:"",
    };
  },

  created(){
  },

  mounted() {
    this.userId = this.$route.query.userId;
  },
  destroyed() {
  },
  activated() {
  },
  methods: {

    submitMsg() {
      if(this.checkValue()){
        var resultList = [];
        resultList.push({
          base64URL: this.mFileList[0]['url'],
          moduleName: "qxgl",
        });
        new Uploader().multiUpload(
          resultList,
          (urlArray) => {
            if(urlArray != null && urlArray.length == 1){
              this.submitHeadMsg(urlArray[0]);
            }else {
              Notify({
                type: "danger",
                message: "上传头像失败，请联系平台或者稍候再试",
              });
            }
          },
          true
        );
      }
    },
    checkValue(){
      if (this.mFileList.length == 0) {
        Notify({
            type: "danger",
            message: "请选择你的头像",
        });
        return false;
      } 
      return true;
    },

    submitHeadMsg(headPhotoPath){
      let that = this
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/user/update",
          params: {
            headPicture: headPhotoPath,
            userId:this.userId,
          },
        })
        .then((ret) => {
          Notify({
              message: '上传成功',
              type: "success",
          });
          this.$bus.$emit("refreshUserInfo", null);
          this.$router.go(-1);
        }).catch((result) =>{
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },


    delPicFile(file, detail) {
      return new Promise((resolve, reject) => {
        this.$dialog
          .confirm({
            title: "确认",
            message: "您是否要确认删除该图片?",
          })
          .then(() => {
            console.log("点击确定");
            resolve();
          })
          .catch(() => {
            // 点击取消或关闭事件
            console.log("点击取消或关闭");
            // return false;
            reject();
          });
      });
    },

    goSuggestionList(){
      this.$router.push({ name: 'SuggestionList' });
    },

    selectFile(){
      console.log("点击选择文件");
      // this.acceptFile = "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,text/plain";
      this.$refs.file.accept = "";
      this.$refs.file.click();
    },


    
    fileChange (e) {
      // if (!this.currentAddFile.fileList) {
      //   this.currentAddFile.fileList = []
      // }
      var files = this.$refs.file.files;
      // var length = 0;
      // var that = this;
      if(files && files.length > 0) {
         for (let i = 0; i < files.length; i++) {
          console.log("文件信息：" , files[i]);
          if(files[i].type.indexOf("image")!= -1)  {
            let obj = { fileName: files[i].name, file: files[i], fileId: `${new Date().getTime()}`, moduleName:'tzgl', fileType:1, filePath:"", type:"file"};
            console.log("文件信息：" , this.acceptFile);
              console.log("文件1");
              new fileUploader().readFile(files[i], (base64) => {
                length++;
                obj.url = `${base64}`;
                this.mFileList.push(obj);
              })
          }else {
            this.$toast.fail("请选择图片上传");
          }
        }
        // this.mFileList[0]["fileName"]
      }else {
        this.$toast.fail("请选择文件上传");
      }
     

    },









    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  .uploaderAddBg{
    z-index: 100;
    background: #efefef;
    border-radius: 8px;
    // margin: 4px;
    position: relative;
    width: calc((100vw - 24px) / 4 - 8px);
    height: calc((100vw - 24px) / 4 - 8px);
  }
  .uploaderAddIcon{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }







</style>